import { useState } from 'react';
import { CustomTaskFormProps } from './types';

export const CustomTaskForm = ({ onSubmit, categories }: CustomTaskFormProps) => {
  const [taskName, setTaskName] = useState('');
  const [instructions, setInstructions] = useState('');
  const [category, setCategory] = useState('');
  const [saveToLibrary, setSaveToLibrary] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit({
      id: `custom-${Date.now()}`, // 为自定义任务生成临时ID
      taskTitle: taskName || '未命名任务',
      taskGuide: instructions,
      category: category || '未分类',
      saveToLibrary: saveToLibrary || false
    });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="grid grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">
            任务名称
          </label>
          <input
            type="text"
            value={taskName}
            onChange={(e) => setTaskName(e.target.value)}
            placeholder="输入任务名称..."
            className="w-full p-2 border rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
            required
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">
            分类
          </label>
          <select
            value={category}
            onChange={(e) => setCategory(e.target.value)}
            className="w-full p-2 border rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
            required
          >
            <option value="">选择分类</option>
            {categories.map((cat) => (
              <option key={cat} value={cat}>
                {cat}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">
          任务说明
        </label>
        <textarea
          value={instructions}
          onChange={(e) => setInstructions(e.target.value)}
          placeholder="输入详细的任务说明..."
          className="w-full p-2 border rounded-md h-32 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
          required
        />
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
          请提供清晰的浏览器自动化任务步骤说明。
        </p>
      </div>

      <label className="flex items-center gap-2">
        <input
          type="checkbox"
          checked={saveToLibrary}
          onChange={(e) => setSaveToLibrary(e.target.checked)}
          className="rounded text-blue-500 dark:bg-gray-700 dark:border-gray-600"
        />
        <span className="text-sm text-gray-700 dark:text-gray-300">
          执行后保存此任务到库中
        </span>
      </label>

      <div className="flex gap-4">
        <button
          type="submit"
          className="bg-blue-500 text-white px-6 py-2 rounded-md flex items-center gap-2 hover:bg-blue-600"
        >
          <span>▶</span>
          执行任务
        </button>
      </div>

      <div className="flex gap-4 pt-4 border-t mt-6 dark:border-gray-700">
        <button
          type="button"
          className="px-4 py-2 text-blue-500 border border-blue-500 rounded-md flex items-center gap-2 hover:bg-blue-50 dark:hover:bg-blue-900/20"
        >
          浏览任务库
          <span>→</span>
        </button>
        <button
          type="button"
          className="px-4 py-2 text-blue-500 border border-blue-500 rounded-md flex items-center gap-2 hover:bg-blue-50 dark:hover:bg-blue-900/20"
        >
          高级执行
          <span>→</span>
        </button>
      </div>
    </form>
  );
};

export default CustomTaskForm
 